<!-- 考试明细 -->
<template>
  <px-dialog v-model="visible" title="考试成绩明细" width="1500" @close="cancel">
    <div class="flex-center">
      <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
        <px-form-item label="姓名" prop="examineeName">
          <px-input v-model="queryParams.examineeName" style="width: 260px" placeholder="请输入姓名" clearable />
        </px-form-item>
        <px-form-item label="组织" prop="organization">
          <px-tree-select
            v-model="queryParams.organization"
            :data="organizationList"
            :props="{ value: 'deptName', label: 'deptName' }"
            check-strictly
            placeholder="请选择组织"
            style="width: 260px"
          />
        </px-form-item>
        <px-form-item label="考试结果" prop="examTimes">
          <px-select v-model="queryParams.examTimes" style="width: 260px" placeholder="请选择考试状态" clearable>
            <px-option v-for="item in examTimesList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="考试状态" prop="resultType">
          <px-select v-model="queryParams.resultType" style="width: 260px" placeholder="请选择考试类别" clearable>
            <px-option v-for="item in resultTypeList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <div class="search-form-btn">
          <px-button type="primary" @click="handleQuery">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
          <px-button @click="handleExport">导出</px-button>
        </div>
      </px-form>
    </div>
    <div v-loading="loading" class="table-content">
      <px-table height="500" :data="tableData" size="small" border class="common-table">
        <px-table-column type="index" label="序号" fixed width="55" align="center" />
        <px-table-column prop="examineeName" label="姓名" min-width="120" show-overflow-tooltip />
        <px-table-column prop="workNo" label="工号" min-width="120" show-overflow-tooltip />
        <px-table-column prop="org" label="组织" min-width="120" show-overflow-tooltip />
        <px-table-column prop="examName" label="考试名称" d min-width="120" show-overflow-tooltip />
        <px-table-column prop="state" label="考试状态" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            {{ resultTypeMap[scope.row.state] ?? "" }}
          </template>
        </px-table-column>
        <px-table-column prop="totalScore" label="总分" min-width="120" show-overflow-tooltip />
        <px-table-column prop="score" label="成绩" min-width="120" show-overflow-tooltip />
        <px-table-column prop="planTime" label="考试计划时间" min-width="120" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.planTime ?? "-" }}</template>
        </px-table-column>
        <px-table-column prop="startTime" label="考试时间" min-width="120" show-overflow-tooltip>
          <template #default="scope"> {{ scope.row.startTime ?? "-" }}</template>
        </px-table-column>
        <px-table-column prop="timeDifference" label="考试用时" min-width="120" show-overflow-tooltip />
        <px-table-column prop="examTimes" label="考试结果" min-width="120" show-overflow-tooltip>
          <template #default="scope"> 已考{{ scope.row.examTimes ?? 0 }}次 </template>
        </px-table-column>
        <px-table-column label="操作" width="80" fixed="right" align="center">
          <template #default="scope">
            <px-tooltip content="详情" placement="top">
              <px-button link icon="Tickets" type="primary" @click="handleViewDetail(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        class="table-pagination"
        :total="total"
        @pagination="handleQuery"
      />
    </div>
  </px-dialog>
</template>
<script setup>
import { getCurrentInstance, computed, ref, reactive, toRefs, onMounted } from "vue";
import { getExamLedgerDetailAPI } from "@/api/knowledge/examManage";
import { getOrganizationListAPI } from "@/api/knowledge/documentManage";
import { useRouter } from "vue-router";
import { queryDictData } from "@/api/common";

const router = useRouter();

const { proxy } = getCurrentInstance();

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  classNameList: {
    type: Array,
    default: () => []
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  examTypeList: {
    type: Array,
    default: () => []
  }
});
const emits = defineEmits(["update:visible"]);

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const formRef = ref(null);

const resultTypeMap = {
  P: "已通过",
  F: "未通过",
  ONC: "逾期未通过",
  OC: "逾期通过"
};
const resultTypeList = ref([
  {
    name: "已通过",
    value: "P"
  },
  {
    name: "未通过",
    value: "F"
  },
  {
    name: "逾期未通过",
    value: "ONC"
  },
  {
    name: "逾期通过",
    value: "OC"
  }
]);

const examTimesList = ref([
  {
    name: "已考1次",
    value: 1
  },
  {
    name: "已考2次",
    value: 2
  },
  {
    name: "已考3次",
    value: 3
  },
  {
    name: "已考4次",
    value: 4
  },
  {
    name: "已考5次",
    value: 5
  }
]);

const state = reactive({
  queryParams: {},
  loading: false,
  organizationList: [],
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 20
});
const { queryParams, loading, organizationList, tableData, total, pageNum, pageSize } = toRefs(state);

onMounted(() => {
  getOrganizationList();
  handleQuery();
  // getExamStatusSelect();
});

// 获取组织
const getOrganizationList = async () => {
  // const params = {
  //   pageNum: 1,
  //   pageSize: 9999
  // };
  const res = await getOrganizationListAPI();
  state.organizationList = res;
};

// 获取考试状态下拉框数据
const getExamStatusSelect = async () => {
  const resultTypeList = await queryDictData({ typeCode: "TRAIN_STATUS" });
  resultTypeList.value = [...statusList];
};

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      pageNum: state.pageNum,
      pageSize: state.pageSize,
      examId: props.rowData.examId,
      examineeName: state.queryParams.examineeName,
      org: state.queryParams.organization,
      examTimes: state.queryParams.examTimes,
      state: state.queryParams.resultType
    };
    const res = await getExamLedgerDetailAPI(params);
    if (res?.data?.length) {
      let data = res?.data;
      data?.forEach(i => {
        let startTime = i?.planStartTime?.split(" ")[0] ?? "";
        let endTime = i?.planEndTime?.split(" ")[0] ?? "";
        if (startTime && endTime) {
          i.planTime = startTime + "~" + endTime;
        } else {
          i.planTime = "-";
        }
      });
      state.tableData = data;
      state.total = res.total;
    } else {
      state.tableData = [];
      state.total = 0;
    }
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

// 导出
const handleExport = () => {
  const params = {
    examId: props.rowData?.examId,
    examineeName: state.queryParams.examineeName ? state.queryParams.examineeName : "",
    org: state.queryParams.organization ? state.queryParams.organization : "",
    state: state.queryParams.resultType ? state.queryParams.resultType : "",
    examTimes: state.queryParams.examTimes ? state.queryParams.examTimes : null
  };
  proxy.download("post", "/dms/api/v1/exam/exportExamine", params, "考试台账明细.xlsx");
};

// 详情
const handleViewDetail = row => {
  router.push({
    path: "/all/knowledge/examManage/myExam/examResult",
    query: {
      examId: row.examId,
      examineeId: row.examineeId,
      clickSource: 2
    }
  });
};

const cancel = () => {
  emits("update:visible", false);
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");
</style>
